<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			#app{
			text-align: center;
			margin-top: 20px;
		    },
			[v-cloak]{
				display: none;
			}
			.tabs {
				 font-size: 14px;
				 color: #657180;
			}
			.tabs-bar:after{
				content: '';
				display: block;
				width: 100%;
				height: 1px;
				background: #d7dde4;
				margin-top: -1px;
			}
			.tabs-tab{
				display: inline-block;
				padding: 4px 16px;
				margin-right: 6px;
				 background: #FFFFFF;
				 border: 1px solid #d7dde4;
				 cursor: pointer;
				 position: relative;
			}
			.tabs-tab-active{
				color: #3399ff;
				border-top: 1px solid #3399ff;
				border-bottom: 1px solid #fff;
			}
			.tabs-tab-active:before{
				content: '';
				display: block;
				height: 1px;
				background: #3399FF;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
			}
			.tabs-content{
				padding: 8px 0;
			}
	</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">标题</h1>
		</header>
		<div class="mui-content" id="app" v-cloak>
			 <component-tabs v-model="activeKey">
				  <component-pane label="标签一" name="1"> 标签一的内容 </component-pane>
				  <component-pane label="标签二" name="2"> 标签二的内容 </component-pane>
				  <component-pane label="标签三" name="1"> 标签三的内容 </component-pane>
			 </component-tabs>
		</div>
		<!-- >tabs.js< -->
		<script type="text/x-template" id="template-tabs">
			<div class="tabs">
			<div class="tabs-bar">
				<!-- 标签页标题, 这里要用 v-for -->
				<div  :class="tabCls(item)",
					   v-for="(item,index) in  navList"
						@click="handleChange(index)"
				>
					{{item.label}}
				</div>
			</div>
			<div class="tabs-content">
				<!-- 这里的solt 就是嵌套的 pane  -->
				<slot></slot>
			</div>
		</div>
	    </script>
		<!--  -->
		<script type="text/x-template" id="template-pane">
			<div class="pane" v-show="show">
				<solt></solt>
			</div>
		</script>
		<!-- >pane.js< -->
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					activeKey:'1'
				},
				components: {
					'component-tabs': {
						template: "#template-tabs",
						data:function(){
							return {
								//用于渲染tabs的标题 
								 navList:[]
							}
						},
						props:{
							value:[String, Number]
						},
						 data:function(){
							 return{
								 
								 //因为不能修改 value ,所有复制一份自己维护
								 currentValue:this.value,
								 navList:[]
							 }
						 }
						,
						methods:{
							
							handleChange:function(index){
								 var nav = this.navList[index]; 
								 var name = nav.name; 
								 //改变当前选中的tab, 并触发下面的watch 
								 this.currentValue = name ; 
								 //更新value 
								  this.$emit('input',name); 
								  //触发一个自定义事件,供父级使用 
								  this.$emit('on-click',name); 
							}, 
							tabCls:function(item){
								
								return [
									'tabs-tab',
									{
										//给当前选中的tab加一个class 
										'tabs-tab-active':item.name === this.currentValue
									}
								]
							}
							,
							getTabs:function(){
								//通过遍历子组件 ,得到所有的pane 组件
								return this.$children.filter(function(item){
									return item.$options.name === 'pane'; 
								}); 
							},
							updateNav:function(){
								 this.navList = [];
								 // 设置 对 this的引用, 在function 回调里, this 指向的并不是vue实例 
								 var  _this = this; 
								 this.getTabs().forEach(function(pane, index ){
									 
									  _this.navList.push({
										  label:pane.label,
										  name:pane.name || index
									  }); 
									  //如果没有给pane 设置 name , 默认设置为它的索引 
									  if(!pane.name) pane.name = index; 
									  if(index === 0 ){
										  
										  if ( !_this.currentValue){
											   
											   _this.currentValue = pane.name || index; 
										  }
									  }
									  this.updateStatus(); 
									  
								 }); 
							},
							updateStatus:function(){
								 
								 var  tabs = this.getTabs(); 
								 var _this = this; 
								 
								 //显示当前选中的tab 对应的pande 组件 ,隐藏没有选中的 
								 tabs.forEach(function(tab){
									 return tab.show = tab.name === _this.currentValue;
								 });
									 
								 
							}
							
						},
						watch:{
							value: function(val){
								this.currentValue = val; 
								
							}, 
							currentValue:function(){
								//在当前选中的tab 发生变化时候,更新pane的显示状态
								this.updateStatus()
							}
						}
					},
					'component-pane': {
						template: '#template-pane',
						props:{
							name:{ // pane 的唯一标识
								type:String
							}, 
							label:{ //标签页标题
								type:String,
								default:''
							}
						},
						data:function(){
							
							return{
								show:true
							}
						}, 
						methods:{
							updateNav:function(){
								this.$parent.updateNav(); 
							}
						},
						watch:{
							label:function(){
								this.updateNav();
							}
						},
						mounted:function(){
							this.updateNav()
						}
					}
				}

			})
		</script>
	</body>
</html>
